<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* *{
        margin: 0;
        padding: 0;
    } */
    .table {
        text-align: center;
        border-collapse:collapse;
        border-spacing: 0;
        border: 1px solid;
    }
    .table tr th{
        background-color: skyblue;
        border: 1px solid;
        padding: 10px;
    }

    .table tr td{
        border: 1px solid;
        padding: 10px;
    }
</style>


<body>
    <table class="table">
        <tr>
            <th class="allCheck">
                <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
            </th>
            <th>商品</th>
            <th>商家</th>
            <th>价格</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>小米手机</td>
            <td>小米</td>
            <td>￥1999</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>小米净水器</td>
            <td>小米</td>
            <td>￥4999</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>小米电视</td>
            <td>小米</td>
            <td>￥5999</td>
        </tr>
    </table>

    <script>
        const allCheck = document.querySelector('#checkAll')
        const cks = document.querySelectorAll('.ck')
        // allCheck.checked = true
        allCheck.addEventListener('click',function(){
            
        console.log(allCheck.checked)
        for(let i = 0;i<cks.length;i++){
            console.log(this)
            cks[i].checked = this.checked
        }
        })
        //小复选框控制大复选框
        for(let i = 0;i<cks.length;i++){
            cks[i].addEventListener('click',function(){
                console.log(document.querySelectorAll('.ck:checked').length)
                if(document.querySelectorAll('.ck:checked').length===3)
                allCheck.checked=true
                else
                allCheck.checked=false

            })
        }

    </script>
</body>

</html>